<template>
    <div class="app-container">
        <!-- <div class="filter-container bor-container">
          <el-form size="mini" :model="formInline" :inline="true">
            <el-form-item prop="name">
              <el-input v-model="formInline.name" placeholder="请输入角色名"></el-input>
            </el-form-item>
            <el-button size="mini" @click="query()" type="primary" icon="el-icon-search">查询</el-button>
          </el-form>
        </div> -->
        <div class="filter-container btn-right">
            <el-button size="mini"  type="primary" @click="dialog.status = true" icon="el-icon-plus">添加友情链接</el-button>
        </div>
        <el-table v-loading="loading" border :data="tableData">
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column prop="name" label="链接方"></el-table-column>
            <el-table-column prop="link" label="地址"></el-table-column>
            <el-table-column prop="createtime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  size="mini" type="warning" @click="openEdit(scope.row)" icon="el-icon-edit-outline" >编辑</el-button>
                    <el-button size="mini"   @click="onDelete(scope.row, scope.$index)" icon="el-icon-delete" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          class="pagination-right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-sizes="[10]"
          :page-size="formInline.pagenum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="formInline.total">
        </el-pagination>
        <links-list-edit
          @close="close"
          @success="success"
          v-if="dialog.status"
          :id="dialog.id"
          :dialog_="dialog.status"
        ></links-list-edit>
    </div>
</template>
<script>
import { getLinkListAPI , deleteLinkAPI} from '@/api/link'
import { mapGetters } from 'vuex'
import LinksListEdit from './components/LinksListEdit'
    //import moment from 'moment'
    export default {
        // 角色管理
        name: 'LinksList',
        components: {
            LinksListEdit
        },
        data() {
            return {
                formInline: {
                    name: '',
                    page: 0,
                    pagenum: 10,
                    total: 0
                },
                dialog: {
                    status: false,
                    id: null
                },
                loading: false,
                tableData: []
            }
        },
        computed: {
            ...mapGetters([
              'buttons',
            ])
        },
        methods: {
            // 打开编辑页面
            openEdit(obj) {
                this.dialog.id = obj.id;
                this.dialog.status = true;
            },
            // 操作成功更新列表
            success() {
                this.getLinkList();
            },
            close() {
                this.dialog.status = false;
                this.dialog.id = null;
            },
            // 下架
            Obtained(){
                this.$confirm('是否确认下架该banner图?下架后将不在前端显示', '提示', {
                    confirmButtonText: '下架',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    obj.delLoading = true;
                    deleteRoleAPI({ id: obj.Id}).then(res => {
                        obj.delLoading = false;
                        if (res.code === 0) {
                            this.$emit('success');
                            this.$message.success('操作成功');
                            this.getLinkList();
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                });
            },
            // 删除角色
            onDelete(obj, index) {
                this.$confirm('是否删除该banner图?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    obj.delLoading = true;
                    deleteLinkAPI({ id: obj.id}).then(res => {
                        obj.delLoading = false;
                        if (res.code === 0) {
                            this.$emit('success');
                            this.$message.success('操作成功');
                            this.getLinkList();
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                });
            },
            // 点击查询事件
            query() {
                this.formInline.pageNum = 1;
                this.getLinkList();
            },
            // pageSize发生改变触发
            handleSizeChange(val) {
                this.formInline.pageNum = 1;
                this.formInline.pageSize = val;
                this.getLinkList();
            },
            // pageNum 发生改变触发
            handleCurrentChange(val) {
                this.formInline.page = val-1;
                this.getLinkList();
            },
            // 获取列表
            getLinkList() {
                this.loading = true;
                getLinkListAPI(this.formInline).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.tableData = res.data.list;
                        this.formInline.total = res.data.total;
                    } else {
                        this.$message.error(res.message)
                    }
                });
            }
        },
        mounted() {
            this.getLinkList();
        }
    }
</script>

